<template>
	<z-paging ref="paging" v-model="list" @query="getData" :loading-more-enabled="false">
		<view class="d-p-l-30 d-p-r-30" v-if="list.length > 0">
			<view class="d-m-t-20 d-flex d-col-top">
				<u-image :src="info.picture" width="210rpx" height="248rpx"></u-image>
				<view class="d-m-l-20 d-flex-1">
					<view class="d-font-30 u-line-1">{{ info.name }}</view>
					<view class="d-flex d-m-t-18">
						<view class="d-tag d-flex" v-if="info.specif">{{ info.specif }}</view>
					</view>
					<!-- <view class="d-font-24 d-be d-m-t-20">{{ info.tip }}</view> -->
					<view class="d-m-t-60 d-font-30 d-red">
						<text class="d-font-24">￥</text>
						<text class="d-bold">{{ info.selling_price }}</text>
					</view>
				</view>
			</view>
			<view class="d-flex d-m-t-30 d-p-b-30 u-border-bottom">
				<view class="d-flex-1 d-font-28">购买数量</view>
				<view>
					<u-number-box v-model="form.number" :disabled="true" :disabledInput="true" :disablePlus="true" :disableMinus="true">
						<view slot="minus" class="minus d-flex d-row-center"><u-icon name="minus" size="24rpx" color="#000"></u-icon></view>
						<view slot="input" class="input d-flex d-row-center">{{ form.number }}</view>
						<view slot="plus" class="plus d-flex d-row-center"><u-icon name="plus" size="24rpx" color="#000"></u-icon></view>
					</u-number-box>
				</view>
			</view>
			<!-- <view class="d-flex d-p-t-30 d-p-b-30" v-if="info.cate_id == 1">
				<u-checkbox-group shape="circle" v-model="has_child" active-color="#59A0FF" size="32rpx"><u-checkbox name="ok"></u-checkbox></u-checkbox-group>
				<view class="d-font-28 d-flex-1" @click="setChild">携带1米以下儿童</view>
				<view class="d-font-28 d-m-r-20 d-p-l-80" @click="show.pick = true">{{ form.has_child }}</view>
				<u-icon name="arrow-right" size="24rpx" @click="show.pick = true"></u-icon>
			</view> -->
			<!-- <view class="d-flex d-notice d-p-l-30 d-p-r-30 d-p-t-26 d-p-b-26">
				<u-image src="/static/ss.png" width="65rpx" height="29rpx"></u-image>
				<view class="d-p-l-22 d-font-26">当前游泳馆人数密度：宽松</view>
			</view> -->
			<view class="d-m-t-30">
				<view class="d-font-32 d-main">购买须知</view>
				<view class="d-font-28 d-m-t-10"><u-parse :content="info.buy_content"></u-parse></view>
				<!-- <view class="d-font-28 d-bold d-m-t-20">有效期</view>
				<view class="d-66 d-font-26">·2023-03-13</view>

				<view class="d-font-28 d-bold d-m-t-20">使用时段</view>
				<view class="d-66 d-font-26">·购票当日，以场馆开放时间为准</view>

				<view class="d-font-28 d-bold d-m-t-20">使用规则</view>
				<view class="d-66 d-font-26">·无需预约，每张票限一人使用</view> -->
			</view>
		</view>

		<d-agent :show="show.agent" title="用户须知" :content="info.user_content" @confirm="show.agent = false"></d-agent>
		<u-picker
			:show="show.pick"
			closeOnClickOverlay
			:columns="[[1]]"
			title="儿童数量"
			@close="show.pick = false"
			@cancel="show.pick = false"
			@confirm="setChildNumber"
		></u-picker>

		<template slot="bottom">
			<view class="d-p-l-30 d-p-r-30 d-p-b-20 d-p-t-20">
				<view class="d-flex">
					<u-checkbox-group size="24rpx" shape="circle" v-model="agent" active-color="#59A0FF">
						<u-checkbox name="ok" label="我已同意和接受" label-size="25rpx" label-color="#999999"></u-checkbox>
					</u-checkbox-group>
					<text class="d-font-24" @click="show.agent = true">《用户须知》</text>
				</view>
				<view class="d-m-t-30 d-flex">
					<view class="d-flex-1 d-font-30">
						<text>总额：</text>
						<text class="d-font-24 d-red">￥</text>
						<text class="d-red" v-if="info.selling_price">{{ (info.selling_price * form.number).toFixed(2) }}</text>
					</view>
					<view>
						<u-button
							type="primary"
							shape="circle"
							:custom-style="{
								height: '80rpx',
								width: '240rpx',
								fontSize: '30rpx',
								background: '#59A0FF'
							}"
							@click="ticketPay"
						>
							立即购买
						</u-button>
					</view>
				</view>
			</view>
		</template>
	</z-paging>
</template>

<script>
import { ticketDetail } from '@/common/api';
export default {
	data() {
		return {
			show: {
				agent: false,
				pick: false
			},
			list: [],
			info: {},
			id: '',
			form: {
				has_child: 1,
				number: 1
			},
			has_child: [],
			agent: ['ok']
		};
	},
	onLoad(e) {
		this.id = e.id;
	},
	methods: {
		getData() {
			ticketDetail({
				id: this.id
			})
				.then(res => {
					this.$refs.paging.complete([res]);
					this.info = res;
				})
				.catch(err => {
					this.$ref.paging.complete(false);
				});
		},
		setChild() {
			if (this.has_child.length) {
				this.has_child = [];
			} else {
				this.has_child = ['ok'];
			}
		},
		ticketPay() {
			if (!this.agent.length) {
				uni.$u.toast('请先同意用户须知');
				return;
			}
			// uni.$u.route({
			// 	url: '/pages/home/ticketPay',
			// 	// type: 'redirectTo',
			// 	params: {
			// 		id: this.id,
			// 		number: this.form.number,
			// 		member_type: this.info.member_type || '',
			// 		has_child: this.has_child.length ? this.form.has_child : 0
			// 	}
			// });
		},
		setChildNumber(e) {
			this.form.has_child = e.value[0];
			this.show.pick = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.d-tag {
	background: #f3f3f3;
	border-radius: 4rpx;
	height: 36rpx;
	font-size: 24rpx;
	font-weight: 500;
	color: #333333;
	padding: 0 18rpx;
}
.d-be {
	color: #bebebe;
}
.d-red {
	color: #ff4105;
}
.d-bold {
	font-weight: bold;
}

.minus,
.plus {
	width: 38rpx;
	height: 38rpx;
	background: #f3f3f3;
}
.input {
	width: 64rpx;
	font-size: 28rpx;
}

.d-notice {
	background-color: #f6f6f6;
	margin: 0 -30rpx;
}

.d-main {
	color: #59a0ff;
}
.d-66 {
	color: #666;
}
</style>
